<template>
	<view style="background-color: #f1f1f1;height: 100vh;">
		<view class="top">
			<view class="topOne">
				<view class="topOne-left">
					<text>申报信息</text>
				</view>
				<view class="topOne-right">
					<text>申报单号：{{dataList.YDRNUM}}</text>
				</view>
			</view>
			<view class="two">
				<view class="two-one">
					<view class="two-oneLeft">联系人 :</view>
					<view class="two-oneRight">{{dataList.PROPOSER}}</view>
				</view>
				<view class="two-one">
					<view class="two-oneLeft">电 话 :</view>
					<view class="two-oneRight">
						<span style="border-bottom: 1px solid blue;color: blue;"
							@click="callPhone(dataList.PROPHONE)">{{dataList.PROPHONE}}
						</span>
					</view>
				</view>
				<view class="two-one">
					<view class="two-oneLeft">申报时间 :</view>
					<view class="two-oneRight">{{dataList.REPTIM}}</view>
				</view>
				<view class="two-one">
					<view class="two-oneLeft">申报地点 :</view>
					<view class="two-oneRight">{{dataList.ADDRESS}}</view>
				</view>
				<view class="two-one">
					<view class="two-oneLeft">
						隐患描述 :</view>
					<view class="two-oneRight">{{dataList.REPCONT}}</view>
				</view>
				<view class="two-one">
					<view class="two-oneLeft">隐患照片 ：</view>
				</view>
				<u-album :urls="urls"></u-album>
			</view>
		</view>
		<view class="wxxx">
			<view class="wxxxOne">
				<view class="wxxxOne-left">
					<text>整改信息</text>
				</view>
			</view>
			<view class="two2">
				<view class="two2-one">
					<view class="two2-oneLeft">责任 :</view>
					<view class="two2-oneRight">{{dataList.SERPSON}}</view>
				</view>
				<view class="two2-one">
					<view class="two2-oneLeft">联系方式 :</view>
					<view class="two-oneRight">
						<span style="border-bottom: 1px solid blue;color: blue;"
							@click="callPhone(dataList.SERPHONE)">{{dataList.SERPHONE}}
						</span>
					</view>
				</view>
				<view class="two2-one">
					<view class="two2-oneLeft">整改期限 :</view>
					<view class="two2-oneRight">{{dataList.YJXFTIME}}</view>
				</view>
				<view class="two2-one">
					<view class="two2-oneLeft">派单时间 :</view>
					<view class="two2-oneRight">{{dataList.YPDTIME}}</view>
				</view>
				<view class="two2-one">
					<view class="two2-oneLeft">受理时间 :</view>
					<view class="two2-oneRight">{{dataList.SERTIME}}</view>
				</view>
				<view class="two2-one" v-if="dataList.BUGANA!=''">
					<view class="two2-oneLeft">整改描述 :</view>
					<view class="two2-oneRight">{{dataList.BUGANA}}</view>
				</view>
				<view class="two-one" v-if="dataList.BUGANA!=''">
					<view class="two-oneLeft">整改照片 ：</view>
				</view>
				<u-album :urls="urls2"></u-album>
				<view class="two2-one" v-if="dataList.YWXCL!='' && dataList.BUGANA==''">
					<view class="two2-oneLeft" style="color: red;">延期时间 :</view>
					<view class="two2-oneRight" style="color: red;">{{dataList.YYJDAT}}</view>
				</view>
				<view class="two2-one" v-if="dataList.YWXCL!='' && dataList.BUGANA==''">
					<view class="two2-oneLeft" style="color: red;">延期描述 :</view>
					<view class="two2-oneRight" style="color: red;">{{dataList.YWXCL}}</view>
				</view>
			</view>
		</view>
		<view class="ddlcjlBox">
			<view class="wxxxOne">
				<view class="wxxxOne-left" style="padding-left: 30rpx;">
					<text>订单流程记录</text>
				</view>
			</view>
			<view class="ddlcjlBox-two" v-for="(item,index) in dataList2" :key="index">
				<view class="ddlcjlBox-twoLeft">
					<text>{{item.DATETIME}}</text>
				</view>
				<view class="ddlcjlBox-twoCenter">
					<text>{{item.NAME}}</text>
				</view>
				<view class="ddlcjlBox-twoRightr">
					<text>{{item.TYP}}</text>
				</view>
			</view>
		</view>
		<view class="jlBox" v-if="dataList.DSTAT<=4">
			<!-- <text>暂无记录</text> -->
			<view class="btnBox">
				<view class="btnBox-right" v-if="dataList.DSTAT==3">
					<u-button class="rgzxBox-btn2" type="primary"
					@click="okBtn">完成整改</u-button>
				</view>
				<view class="btnBox-right" v-if="dataList.DSTAT==4">
					<u-button class="rgzxBox-btn2" type="primary"
					@click="confirm">{{ dataList.YWXCL!='' && dataList.BUGANA=='' ? '同意延期' : '验收确认'}}</u-button>
				</view>
			</view>
		</view>

		<u-modal width="430rpx" :show="show" :title="title" :content='content'
		@confirm="confirm">
		    <u-form>
		        <u-form-item>
		          <u-rate :count="count" v-model="rate"></u-rate>
		        </u-form-item>
		    </u-form>
		</u-modal>
	</view>
</template>

<script>
	import * as dd from 'dingtalk-jsapi'
	export default {
		data() {
			return {
				dataList: {},
				dataList2: [],
				num:'',
				show:false,
				title:'确认撤销',
				content:'您确定要撤销此单子吗？',
				dh:'',
				urls:[],
				urls2:[],
				mediaIds: [],
				ddconfig:{
					nonceStr:'SAGEX3',
					timeStamp:0,
				},
				rate:5,
							count:0,
			}
		},
		onLoad(query) {
			// console.log(query,'补充');
			// 从 query 中获取传递过来的数据，并将其转换为对象
			// this.dataList = JSON.parse(query.bcData);
			this.userInfo = uni.getStorageSync('userInfo')
			this.num = query.num || 'YD2KX24080007';
			this.dh = this.num
			// console.log(this.dataList,'1');
			// this.initdd()
		},
		onShow(query) {
			this.init()
		},
		methods: {
			callPhone(phoneNumber){
				uni.makePhoneCall({
					phoneNumber: phoneNumber, // 电话号码
					success: (res) => {
					  console.log('拨打电话成功');
					  if(this.userInfo.ID=='1'){
						alert('拨打电话成功')
					  }
					},
					fail(err) {
					  console.log('拨打电话失败'+err);
					  if(this.userInfo.ID=='1'){
						alert('拨打电话失败'+err)
					  }
					}
				});
			},
			initdd(){
				// alert(location.href)
				this.ddconfig.timeStamp=new Date().getTime()
				uni.request({
				  url: 'http://125.64.76.148:8125/KXJDDDApi/ddconfig?code=1'
				  +'&nonceStr='+this.ddconfig.nonceStr
				  +'&timeStamp='+this.ddconfig.timeStamp
				  +'&url=http://125.64.76.148:8125/repair/', // 替换为实际的接口URL
				  method: 'GET',
				  data: {},
				  success: (res) => {
					  console.log(res)
					  // uni.$u.toast('initdd.success:'+JSON.stringify(res))
					  // alert('success:'+JSON.stringify(res))
					  dd.config({
					      agentId: '2833818530', // 必填，微应用ID
					      corpId: 'ding81f5b58b1546a0fd35c2f4657eb6378f',//必填，企业ID
					      timeStamp: this.ddconfig.timeStamp, // 必填，生成签名的时间戳
					      nonceStr: this.ddconfig.nonceStr, // 必填，自定义固定字符串。
					      signature: res.data.sign, // 必填，签名
					      type:0/1,   //选填。0表示微应用的jsapi,1表示服务窗的jsapi；不填默认为0。该参数从dingtalk.js的0.8.3版本开始支持
					      jsApiList : [
					          'device.audio.startRecord',
					          'device.audio.stopRecord',
					          'device.audio.play',
							  'device.audio.download',
					      ] // 必填，需要使用的jsapi列表，注意：不要带dd。
					  });

					  dd.error(function (err) {
					      uni.$u.toast('钉钉初始化错误，录音功能无法使用: ' + JSON.stringify(err));
					  })//该方法必须带上，用来捕获鉴权出现的异常信息，否则不方便排查出现的问题
				  },
				  fail(err) {
					  alert('fail:'+err)
				  	console.log(err)
				  }
				})
			},
			async init(){
				let GRP1 = {
						GRP1: [{
							YDRNUM: this.num
						}]
				}
				let res = await this.$api.x3.x3request("WSLISTXDR2",GRP1)

					// 请求成功的处理逻辑
					let resR1 = JSON.parse(res.message)
					this.dataList= resR1.GRP1[0]
					console.log(this.dataList,'新报修数据');
					this.oneLength= resR1.GRP1.length
					var files = resR1.GRP3
					for (var i = 0; i < files.length; i++) {
						if(files[i].TYP=='XDR'){
							this.urls.push(files[i].URL)
						}
						if(files[i].TYP=='XDR2WC'){
							this.urls2.push(files[i].URL)
						}
					}
					var medias = resR1.GRP4
					for (var i = 0; i < medias.length; i++) {
						this.mediaIds.push(medias[i].MID)
					}
					var dat = this.dataList.REPDAT
					this.dataList.REPDAT = dat.slice(0,4)+'-'+dat.slice(4,6)+'-'+dat.slice(6,8)
					this.dataList2.push({
						DATETIME:this.dataList.REPDAT+' '+this.dataList.REPTIM,
						NAME:this.dataList.PROPOSER,
						TYP:'申报'
					})
					if(this.dataList.SERPSON!=""){
						if(this.dataList.YPDUSR!=""){
							this.dataList2.push({
								DATETIME:this.dataList.YPDTIME,
								NAME:this.dataList.YPDUSR,
								TYP:'派单'
							})
						}
						if(this.dataList.SERTIME!=''){
							this.dataList2.push({
								DATETIME:this.dataList.SERTIME,
								NAME:this.dataList.SERPSON,
								TYP:'受理'
							})
						}
					}
					if(this.dataList.YCQ==2){
						if(this.dataList.YDAT1!=""){
							this.dataList2.push({
								DATETIME:this.dataList.YDAT1,
								NAME:'廖帮勇',
								TYP:'同意'
							})
						}
						if(this.dataList.YDAT2!=''){
							this.dataList2.push({
								DATETIME:this.dataList.YDAT2,
								NAME:'刘君伟',
								TYP:'同意'
							})
						}
						if(this.dataList.YDAT1==""){
							this.dataList2.push({
								DATETIME:this.dataList.YDAT1,
								NAME:this.dataList.YUSER1,
								TYP:'待部长同意'
							})
						}	
						if(this.dataList.YDAT1!="" && this.dataList.YDAT2==""){
							this.dataList2.push({
								DATETIME:this.dataList.YDAT1,
								NAME:this.dataList.YUSER2,
								TYP:'待副总同意'
							})
						}	
					}
					if(this.dataList.SERPSON!="" && ((this.dataList.YCQ==2 && this.dataList.YDAT1!="" && this.dataList.YDAT2!="") || this.dataList.YCQ!=2)){
						if(this.dataList.SERTIME!=''){
						}else{
							this.dataList2.push({
								DATETIME:this.dataList.SERTIME,
								NAME:this.dataList.SERPSON,
								TYP:'待受理'
							})
						}
					}
					var dat2 = this.dataList.FINDAT
					console.log(dat2)
					if(dat2!='' && dat2!=null){
						this.dataList.FINDAT = dat2.slice(0,4)+'-'+dat2.slice(4,6)+'-'+dat2.slice(6,8)
					}
					if(this.dataList.FINTIM!=""){
						this.dataList2.push({
							DATETIME:this.dataList.FINDAT+' '+this.dataList.FINTIM,
							NAME:this.dataList.SERPSON,
							TYP:'完成'
						})
					}
					if(this.dataList.YWCTIME!=""){
						this.dataList2.push({
							DATETIME:this.dataList.YWCTIME,
							NAME:this.dataList.PROPOSER,
							TYP:'确认'
						})
					}
					if(this.dataList.YQXTIME!=""){
						this.dataList2.push({
							DATETIME:this.dataList.YQXTIME,
							NAME:this.dataList.YQXUSR,
							TYP:'撤销'
						})
					}
					this.dataList.files=resR1.GRP3
			},
			iwantBc(){
				// 使用 uni.navigateTo 跳转到 my 页面，并传递数据
				 uni.navigateTo({url:"/pages/bclyPages/bclyPages?dataList="+JSON.stringify(this.dataList)})
			},
			okBtn(){
				// 使用 uni.navigateTo 跳转到 my 页面，并传递数据
				 uni.navigateTo({url:"/pages/txwxjlPages/txwxjlPages?typ=2&num="+this.dh});//dataList="+JSON.stringify(this.dataList)})
			},
			cxbxBtn(){
				if(this.dataList.DSTAT==4){
					this.title='确认维修完成'
					this.content='您确定此单子已维修完成吗'
				}
				this.show = true
			},
			async confirm() {
				let GRP1 = {
						GRP1: [{
							YFLG: this.dataList.DSTAT==4 ? "5" : "4",//标识
							YDRNUM: this.num,//单号
							YRATE:this.rate,//评分
							YYSUSR:this.userInfo.NAME,
					}]
				}
				let res = await this.$api.x3.x3request("WSGENXDR2",GRP1)
					// // 请求成功的处理逻辑
					if(res.status=="error"){
						alert(res.message);
						return false;
					}else{
						let wpdData = JSON.parse(res.message)
						// console.log(wpdData,56777);
						if(wpdData.GRP1.WOK==0){
							// 显示创建成功的消息提示
							 uni.showToast({
							   title: '操作成功',
							   icon: 'success',
							   duration: 2000
							});
							// setTimeout(() => {
							// // 3秒后自动关闭
							// this.show = false;
							// 	}, 100)
							let that = this
							setTimeout(function() {
								uni.redirectTo({url:"/pages/dzzxPages/dzzxPages"})
							}, 2000);
						}else{
							uni.showToast({
							   title: '错误：'+wpdData.GRP1.WRESULT,
							   icon: 'error',
							   duration: 2000
							});
							// 3秒后自动关闭
							setTimeout(() => {
								this.show = false;
							}, 1000)
						}
					}
			},
		}
	}
</script>

<style>
.top{
	width: 90%;
	/* height: 350rpx; */
	background-color: white;
	position: relative;
	top: 50rpx;
	margin: 0 auto;
}
.topOne{
	height: 90rpx;
	border-bottom: 1px solid #ccc;
	display: flex;
	justify-content: space-between;
}
.topOne-left{
	width: 230rpx;
	font-weight: bold;
	font-size: 36rpx;
	text-align: center;
	padding-top: 20rpx;
}
.topOne-right{
	width: 400rpx;
	text-align: center;
	padding-top: 20rpx;
	color: gray;
	font-size: 28rpx;
}
.two{
	/* height: 370rpx; */
	background-color: white;
}
.two-one{
	/* height: 60rpx; */
	display: flex;
	justify-content: space-between;
}
.two-oneLeft{
	width: 190rpx;
	line-height: 68rpx;
	color: gray;
	text-align: center;
}
.two-oneRight{
	width: 450rpx;
	line-height: 68rpx;
	color: gray;
	text-align: center;
}
.two2{
	/* height: 250rpx; */
	background-color: white;
}
.two2-one{
	/* height: 60rpx; */
	display: flex;
	justify-content: space-between;
}
.two2-oneLeft{
	width: 190rpx;
	line-height: 68rpx;
	color: gray;
	text-align: center;
}
.two2-oneRight{
	width: 450rpx;
	line-height: 68rpx;
	color: gray;
	text-align: center;
}
.wxxx{
	width: 90%;
	/* height: 350rpx; */
	background-color: white;
	position: relative;
	top: 100rpx;
	margin: 0 auto;
}
.wxxxOne{
	height: 90rpx;
	border-bottom: 1px solid #ccc;
	display: flex;
	justify-content: space-between;
}
.wxxxOne-left{
	width: 230rpx;
	font-weight: bold;
	font-size: 36rpx;
	text-align: center;
	padding-top: 20rpx;
}
.ddlcjlBox{
	width: 90%;
	/* height: 250rpx; */
	position: relative;
	top: 160rpx;
	margin: 0 auto;
	background-color: white;
}
.ddlcjlBox-top{
	height: 70rpx;
	color: gray;
	text-align: center;
	font-size: 38rpx;
	padding-top: 15rpx;
}
.ddlcjlBox-two{
	height: 50rpx;
	display: flex;
	justify-content: space-between;
	color: gray;
	padding-left: 15rpx;
	font-size: 26rpx;
}
.ddlcjlBox-twoLeft{
	width: 320rpx;
}
.ddlcjlBox-twoCenter{
	width: 100rpx;
}
.ddlcjlBox-twoRightr{
	width: 100rpx;
}
.bcjlBox{
    width: 90%;
	height: 70rpx;
	position: relative;
	top: 200rpx;
	margin: 0 auto;
	background-color: white;
	color: gray;
	font-size: 32rpx;
	padding-top: 20rpx;
	padding-left: 20rpx;
}
.jlBox{
	width: 90%;
	height: 00rpx;
	/* position: relative;
	top: 250rpx;
	margin: 0 auto; */
	background-color: white;
	font-size: 42rpx;
	padding-top: 0rpx;
	padding-left: 300rpx;
}
.btnBox{
	width: 100%;
	height: 80rpx;
	position: relative;
	top: 200rpx;
	left: -270rpx;
	display: flex;
	justify-content: space-between;
}
.btnBox-left{
	width: 350rpx;
	border-right: 1px solid #ccc;
}
.btnBox-right{
	width: 350rpx;
}
</style>
